import React from 'react';
import { Toast,Modal } from 'antd-mobile';

const prompt = Modal.prompt;

export default class Index extends React.Component {
    constructor(props){
        super(props)
        this.state={
            id: props.match.params.id,
            content: '',
        }
    }
	componentDidMount(){
        document.title = '详情'
        this.getList()
    }
    getList(){
        global.Ajax.hhtc_request("service/detail",{id: this.state.id}).then(data=>{
			if(data.code===1){
				this.setState({
                    content: data.data.content
                })
			}
		})
    }
    sign(){
        prompt(<p style={{fontSize: 18,fontWeight: 'bold',color: '#16B998',}}>立即预约</p>, <p>填写手机号，预约成功后<br />24小时之内回复</p>,[{
            text: '取消',
            onPress: value => new Promise((resolve) => {
                resolve();
            }),
        }, {
            text: '预约',
            onPress: value => new Promise((resolve, reject) => {
                if(value!=''){
                    var req={
                        id: this.state.id,
                        phone: value,
                    }
                    this.yuyue(req)
                    resolve();
                }else{
                    Toast.fail('请输入手机号!',1)
                }
            }),
        },], 'default', null, ['请输入手机号'])
    }
    yuyue(req){
        global.Ajax.hhtc_request("service/yuyue",req).then(data=>{
			if(data.code===1){
				Toast.success(data.msg,1)
			}else{
                Toast.fail(data.msg,1)
            }
		})
    }
	render(){
		return(
            <div className='service_detail' style={{paddingBottom: '16vw',}}>
                {/* <img alt='' src={require('../../imgs/detail.png')} className='service_detail_img' /> */}
                <div dangerouslySetInnerHTML={{__html:this.state.content}}></div>
                <div className='btnbox'>
                    <p onClick={this.sign.bind(this)}>立即预约</p>
                </div>
            </div>
		)
	}
}
